<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for="item of bannerList" :key="item.id">
                <img :src="item.imgUrl" alt="" class="swiper-img">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
    name: "HomeBanner",
    props: {
        // bannerList: Array
    },
    data () {
        return {
            swiperOption: {
                pagination: {
                    el: '.swiper-pagination'
                }
            },
            bannerList: [{
                "id": "001",
                "imgUrl": "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg"
            },{
                "id": "002",
                "imgUrl": "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg"
            },{
                "id": "003",
                "imgUrl": "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg"
            }]
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
    background: #fff
.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 45.2%
    background: #eee
    margin-bottom: .4rem
    .swiper-img
        width: 7.5rem
        height: 3.39rem
</style>